<template>
  <div class="breadcrumb-nav" v-if="breadcrumbItems.length > 1">
    <el-breadcrumb separator="/">
      <el-breadcrumb-item 
        v-for="(item, index) in breadcrumbItems" 
        :key="index"
        :to="index < breadcrumbItems.length - 1 ? item.path : undefined"
        :class="{ 'is-current': index === breadcrumbItems.length - 1 }"
      >
        <el-icon v-if="item.icon" class="breadcrumb-icon">
          <component :is="item.icon" />
        </el-icon>
        {{ item.name }}
      </el-breadcrumb-item>
    </el-breadcrumb>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { useI18n } from 'vue-i18n'
import { 
  House, 
  User, 
  Setting, 
  Document, 
  ChatDotRound,
  ArrowLeft 
} from '@element-plus/icons-vue'
import { getRouteHistory } from '../../router'

interface BreadcrumbItem {
  name: string
  path: string
  icon?: any
}

const route = useRoute()
const router = useRouter()
const { t } = useI18n()

// 路由名称映射
const routeNameMap: Record<string, { name: string; icon?: any }> = {
  '/': { name: t('nav.home'), icon: House },
  '/main': { name: t('nav.novels'), icon: ChatDotRound },
  '/profile': { name: t('nav.profile'), icon: User },
  '/preferences': { name: t('nav.preferences'), icon: Setting },
  '/settings': { name: t('nav.settings'), icon: Setting },
  '/user-profile': { name: t('nav.profile'), icon: User },
  '/login': { name: t('auth.login.title'), icon: User },
  '/register': { name: t('auth.register.title'), icon: User }
}

// 生成面包屑导航
const breadcrumbItems = computed((): BreadcrumbItem[] => {
  const items: BreadcrumbItem[] = []
  const routeHistory = getRouteHistory()
  const currentPath = route.path
  
  // 添加当前页面
  const currentRoute = routeNameMap[currentPath]
  if (currentRoute) {
    items.push({
      name: currentRoute.name,
      path: currentPath,
      icon: currentRoute.icon
    })
  }
  
  // 添加历史页面（最多显示3个）
  const recentHistory = routeHistory.slice(-3).reverse()
  recentHistory.forEach(path => {
    const routeInfo = routeNameMap[path]
    if (routeInfo && !items.some(item => item.path === path)) {
      items.unshift({
        name: routeInfo.name,
        path: path,
        icon: routeInfo.icon
      })
    }
  })
  
  // 如果当前页面不在历史中，确保它被包含
  if (!items.some(item => item.path === currentPath)) {
    const currentRoute = routeNameMap[currentPath]
    if (currentRoute) {
      items.push({
        name: currentRoute.name,
        path: currentPath,
        icon: currentRoute.icon
      })
    }
  }
  
  return items
})

// 返回上一页
const goBack = () => {
  const history = getRouteHistory()
  if (history.length > 0) {
    const lastRoute = history[history.length - 1]
    router.push(lastRoute)
  } else {
    router.push('/')
  }
}
</script>

<style scoped>
.breadcrumb-nav {
  padding: 12px 20px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  transition: background-color 0.3s ease, border-color 0.3s ease;
}

.breadcrumb-nav :deep(.el-breadcrumb) {
  font-size: 14px;
}

.breadcrumb-nav :deep(.el-breadcrumb__item) {
  display: flex;
  align-items: center;
  gap: 4px;
}

.breadcrumb-nav :deep(.el-breadcrumb__item.is-current) {
  color: var(--text-primary);
  font-weight: 500;
}

.breadcrumb-nav :deep(.el-breadcrumb__item:not(.is-current)) {
  color: var(--text-secondary);
}

.breadcrumb-nav :deep(.el-breadcrumb__item:not(.is-current):hover) {
  color: var(--primary-color);
}

.breadcrumb-icon {
  font-size: 14px;
}

/* 暗色主题支持 */
.dark .breadcrumb-nav {
  background: var(--surface);
  border-bottom-color: var(--border);
}

.dark .breadcrumb-nav :deep(.el-breadcrumb__item.is-current) {
  color: var(--text-primary);
}

.dark .breadcrumb-nav :deep(.el-breadcrumb__item:not(.is-current)) {
  color: var(--text-secondary);
}

.dark .breadcrumb-nav :deep(.el-breadcrumb__item:not(.is-current):hover) {
  color: var(--primary-color);
}
</style>
